<template>
  <div class="rightoneperwrap">
      <div class="left" :style="{'background-image':'url('+img.src+')'}">{{this.per.name}}</div>
      <div class="rightper">
          <div class="rightred">{{this.per.red}}</div>
          <div class="rightorange">{{this.per.orange}}</div>
          <div class="rightyellow">{{this.per.yellow}}</div>
          <div class="rightblue">{{this.per.blue}}</div>
      </div>
  </div>
</template>

<script>
export default {
 props:{
        per:{
            type:Object,
            default:function(){
                return{name:"",red:'',orange:'',yellow:'',blue:''}
            }
        },
    },
    computed: {
        // eslint-disable-next-line vue/return-in-computed-property
        img() {
            if (this.per.name === "邮箱系统") {
                let x={
                    src:require("../assets/icons/19.png")
                };
                return x
            }else if(this.per.name === "网络系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/22.png")
                };
                return x
            }else if(this.per.name === "CRM系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/2.png")
                };
                return x
            }else if(this.per.name === "人力系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/9.png")
                };
                return x
            }else if(this.per.name === "大数据系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/4.png")
                };
                return x
            }else if(this.per.name === "聚源系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/6_10_20.png")
                };
                return x
            }else if(this.per.name === "康沃系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/17.png")
                };
                return x
            }else if(this.per.name === "日志集中管理系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/15.png")
                };
                return x
            }else if(this.per.name === "投行发行系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/12.png")
                };
                return x
            }else if(this.per.name === "恒泰系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/8_21.png")
                };
                return x
            }else if(this.per.name === "太牛系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/1_16_18.png")
                };
                return x
            }else if(this.per.name === "自动化运维系统"){
                let x={
                    color:"#ece12d",
                    src:require("../assets/icons/14.png")
                };
                return x
            }
        }
    }
}
</script>

<style lang="less" scoped>
.rightoneperwrap{
    width: 209px;
    height: 144px;
    display: inline-flex;
    font-family: MicrosoftYaHei;
    .left {
        background-image: url('../assets/icons/19.png');
        background-repeat: no-repeat;
        width: 120px;
        height: 140px;
        line-height: 250px;
        font-size: 19px;
        color: #ffffff;
        letter-spacing: 2px;
    }
    .rightper {
        margin-top: 26px;
        .rightred,.rightorange,.rightyellow,.rightblue {
            width: 63px;
            height: 18px;
            margin-top: 4px;
            letter-spacing: 1px;
            font-size: 10px;
            line-height: 19px;
        }
        .rightred{
            background-image: url('../assets/icons/number_red.png');
            color: #ff5353;
        }
        .rightorange{
            background-image: url('../assets/icons/number_orange.png');
            color: #ffb239;
        }
        .rightyellow{
            background-image: url('../assets/icons/number_yellow.png');
            color: #ffef39;
        }
        .rightblue{
            background-image: url('../assets/icons/number_blue.png');
            color: #46d3ff;
        }
    }
}
</style>